<#assign ctx=request.contextPath />
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>大表定位及脉冲</title>
    <link rel="stylesheet" href="${ctx}/css.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.10&key=9b29a6048cb5ef7de6f503dc38e32d0c&plugin=AMap.ToolBar"></script>
    <!-- 加载远程定位脚本 -->
    <script type="text/javascript" src="${ctx}/remogeo.js"></script>
</head>
<body>
<div class="top">
    <a href="${ctx}/hello" class="backtrack"><img src="${ctx}/0.png"></a>
    <a href="javascript:history.back();" class="return"><img src="${ctx}/12.png"></a>
    <div class="box">
        大表定位及脉冲
    </div>
</div>
<div class="empty"></div>
<form id="frm1" action="${ctx}/setupMeter/commitLocPulse/${taskId}" method="post">
    <table class="list_box">
        <tr>
            <td class="lo_3">水表ID</td>
            <td class="lo_4">
                ${(meter.meterId)!""}
            </td>
        </tr>
        <tr>
            <td class="lo_3">表名</td>
            <td class="lo_4">
                ${(meter.meterName)!""}
            </td>
        </tr>
        <tr>
            <td class="lo_3">表号</td>
            <td class="lo_4">
                ${(meter.meterCode)!""}
            </td>
        </tr>
        <tr>
            <td class="lo_3">户号</td>
            <td class="lo_4">
                ${(meter.userCode)!""}
            </td>
        </tr>
        <tr>
            <td class="lo_3">数据ID</td>
            <td class="lo_4">
                <input name="extId" value="${(meter.extId)!""}" class="flow lo_5">
            </td>
        </tr>
        <tr>
            <td class="lo_3">水表口径</td>
            <td class="lo_4">
                <input name="meterSize" value="${(meter.meterSize)!""}" class="flow lo_5">
            </td>
        </tr>
        <tr>
            <td class="lo_3">脉冲比</td>
            <td class="lo_4">
                <input title="脉冲比" type="text" name="meterPulse" value="${(meter.meterPulse)!""}" class="flow lo_5">
            </td>
        </tr>
        <tr>
            <td class="lo_3">安装时间</td>
            <td class="lo_4">
                <input name="rtuInstallDate" value="${(meter.rtuInstallDate?string("yyyy-MM-dd HH:mm:ss"))!}" class="flow lo_5">
            </td>
        </tr>
        <tr>
            <td class="lo_3">所归水司</td>
            <td class="lo_4">
                ${(meter.firmName)!""} (${(meter.firmId)!""})
            </td>
        </tr>
        <tr>
            <td class="lo_3">安装位置
                <h4 id='status'></h4>
                <hr>
                <p id='result'></p>
            </td>
            <td class="lo_4">

                <div id="map1" class="map" style="height: 200px;"></div>
                <input type="hidden" id="meterLoc" name="meterLoc">

                <script>
                    var map = new AMap.Map('map1', {
                        resizeEnable: true
                    });

                    AMap.plugin([
                        'AMap.ToolBar',
                        'AMap.Scale',
                        'AMap.OverView',
                        'AMap.MapType',
                        'AMap.Geolocation'
                        ], function () {
                        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
                        map.addControl(new AMap.ToolBar());

                        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
                        map.addControl(new AMap.Scale());

                        // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
                        // map.addControl(new AMap.OverView({isOpen:true}));

                        // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
                        // map.addControl(new AMap.MapType());

                        var geolocation = new AMap.Geolocation({
                            enableHighAccuracy: true,//是否使用高精度定位，默认:true
                            timeout: 10000,          //超过10秒后停止定位，默认：5s
                            // buttonPosition: 'RB',    //定位按钮的停靠位置
                            // buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                            zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
                        });

                        //使用远程定位，见 remogeo.js
                        var remoGeo = new RemoGeoLocation();

                        //替换方法
                        navigator.geolocation.getCurrentPosition = function() {
                            return remoGeo.getCurrentPosition.apply(remoGeo, arguments);
                        };

                        //替换方法
                        navigator.geolocation.watchPosition = function() {
                            return remoGeo.watchPosition.apply(remoGeo, arguments);
                        };

                        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
                        map.addControl(geolocation);

                        geolocation.getCurrentPosition();
                        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
                        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
                    });

                    //解析定位结果
                    function onComplete(data) {
                        console.info(data.position);
                        document.getElementById("meterLoc").value = 'GEOMETRYCOLLECTION(POINT(' +
                            data.position.lat + ' ' + data.position.lng + '))';

                        document.getElementById('status').innerHTML = '定位成功';
                        var str = [];
                        str.push('定位结果：' + data.position);
                        str.push('定位类别：' + data.location_type);
                        if (data.accuracy) {
                            str.push('精度：' + data.accuracy + ' 米');
                        }//如为IP精确定位结果则没有精度信息
                        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
                        document.getElementById('result').innerHTML = str.join('<br>');

                    }

                    //解析定位错误信息
                    function onError(data) {
                        document.getElementById('status').innerHTML = '定位失败';
                        document.getElementById('result').innerHTML = '失败原因排查信息:' + data.message;
                    }

                    // 获取地图中心点
                    function setCenter() {
                        var data = map.getCenter();
                        console.info(data);

                        document.getElementById("meterLoc").value = 'GEOMETRYCOLLECTION(POINT(' +
                            data.lat + ' ' + data.lng + '))';
                    }
                </script>
            </td>
        </tr>
        <tr>
            <td class="lo_3">
                照片1
            </td>
            <td class="lo_4"><input type="file" name="findPhoto1"></td>
        </tr>
        <tr>
            <td class="lo_3">
                照片2
            </td>
            <td class="lo_4"><input type="file" name="findPhoto2"></td>
        </tr>
        <tr>
            <td class="lo_3">
                照片3
            </td>
            <td class="lo_4"><input type="file" name="findPhoto3" style="margin:0 auto;"></td>
        </tr>

        <tr>
            <td class="lo_3">提交</td>
            <td class="lo_4"><input type="button" value="  提交 " class="affirm_1" onclick="setCenter(); frm1.submit();"></td>
        </tr>

    </table>
</form>
</body>
</html>
